﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.Master" AutoEventWireup="true" CodeBehind="wfDeviceTrackingDetail.aspx.cs" Inherits="Dragon.wfDeviceTrackingDetail" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<%@ Register assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" namespace="Microsoft.Reporting.WebForms" tagprefix="rsweb" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
    .auto-style4 {
    }
    .auto-style5 {
            width: 108px;
        }
    .auto-style6 {
        text-align: center;
        }
    .auto-style7 {
        width: 64px;
    }
        .auto-style9 {
            width: 100%;
            border: 2px solid #0000FF;
        }
        .auto-style11 {
            width: 98px;
        }
        .auto-style15 {
            width: 153px;
        }
        .auto-style16 {
            width: 84px;
        }
        .auto-style17 {
            width: 110px;
        }
    .auto-style18 {
        width: 127px;
    }
    .auto-style19 {
        width: 173px;
    }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAvb9RBGC3Arn119X7wZIiZrt3yX0DVOOI&libraries=geometry"></script>    
    <script type="text/javascript">
        var markers = [
            <asp:Repeater ID="rptMarkers" runat="server">
                <ItemTemplate>
                    {                    
                    "title": '<%# Eval("Title") %>',
                    "lat": '<%# Eval("Latitude") %>',
                    "lng": '<%# Eval("Longitude") %>'
                    }
                </ItemTemplate>
                <SeparatorTemplate>,</SeparatorTemplate>
            </asp:Repeater>
        ];
        
        var mapOptions, infoWindow, map, step, myTrip;

        function InitMap()
        {            
            //Khoi tao ban do
            mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 18,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            //Khoi tao diem bat dau           
            var data = markers[0]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title,                
                icon:'/Picture/icon.png'
            });

            infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(data.title);
            infoWindow.open(map, marker);            
        }       

        // Define the overlay, derived from google.maps.OverlayView
        function Label(opt_options) {
            // Initialization
            this.setValues(opt_options);

            // Label specific
            var span = this.span_ = document.createElement('span');
            span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                                 'white-space: nowrap; border: 1px solid blue; ' +
                                 'padding: 2px; background-color: white';

            var div = this.div_ = document.createElement('div');
            div.appendChild(span);
            div.style.cssText = 'position: absolute; display: none';
        }
        Label.prototype = new google.maps.OverlayView;

        // Implement onAdd
        Label.prototype.onAdd = function() {
            var pane = this.getPanes().overlayLayer;
            pane.appendChild(this.div_);

            // Ensures the label is redrawn if the text or position is changed.
            var me = this;
            this.listeners_ = [
                google.maps.event.addListener(this, 'position_changed',
                    function() { me.draw(); }),
                google.maps.event.addListener(this, 'text_changed',
                    function() { me.draw(); })
            ];
        };

        // Implement onRemove
        Label.prototype.onRemove = function() {
            this.div_.parentNode.removeChild(this.div_);

            // Label is removed from the map, stop updating its position/text.
            for (var i = 0, I = this.listeners_.length; i < I; ++i) {
                google.maps.event.removeListener(this.listeners_[i]);
            }
        };

        // Implement draw
        Label.prototype.draw = function() {
            var projection = this.getProjection();
            var position = projection.fromLatLngToDivPixel(this.get('position'));

            var div = this.div_;
            div.style.left = position.x + 'px';
            div.style.top = position.y + 'px';
            div.style.display = 'block';

            this.span_.innerHTML = this.get('text').toString();
        };
    </script>
    <div id="dvMap" style="border: 1px solid #003300; width: 100%; height: 600px; "></div>    
</asp:Content>
